// dplayer.vue

<template>
  <div>
    <div id="dplayer" :style="dplayerData.style"></div>
  </div>
</template>

<script>
import DPlayer from 'dplayer'
export default {
  name: 'dplayer',
  props: {
    dplayerData: Object,
  },
  data() {
    return {}
  },
  mounted() {
    this.dp = new DPlayer({
      container: document.getElementById('dplayer'),
      theme: '#b7daff', // 风格颜色，例如播放条，音量条的颜色
      // loop: false, // 是否自动循环
      lang: 'zh-cn', // 语言，'en', 'zh-cn', 'zh-tw'
      hotkey: true, // 是否支持热键，调节音量，播放，暂停等
      preload: 'auto', // 自动预加载
      mutex: true,
      video: {
        url: 'http://piper-blog.oss-cn-hangzhou.aliyuncs.com/root/root1669815021533.mp4?Expires=1669907056&amp;OSSAccessKeyId=LTAI5tD6fXjgrxvAXLkSunev&amp;Signature=4QPkBMJnjzaAGk5ZLbqgBFWqAe0%3D', // 播放视频的路径
        defaultQuality: 0, // 默认是HD
        pic: 'https://piper-blog.oss-cn-hangzhou.aliyuncs.com/20221123/cover20221123230527.jpg', // 视频封面图片
      },
    })
  },
  created() {},
  methods: {
    // 切换视频源事件
    switchVideo(item) {
      this.dp.switchVideo({
        url: item.video,
        pic: item.imgUrl,
      })
    },
    // 暂停事件
    pause() {
      this.dp.pause()
    },
  },
}
</script>


